<template>
	<div>
		<el-alert title="对代理和序列化进行组合, 每对组合进行100次请求, 列出总耗时" type="success" :closable="false" />
		<el-button class="btn-test" type="success" @click="autoTest">点击测试</el-button>
		<el-divider />
		<div id="chart"></div>
		<el-alert title="横坐标说明: 代理方式+序列化" type="info" :closable="false" />
	</div>
	
</template>

<script>

import * as echarts from 'echarts';
import axios from 'axios';


	
export default {
	data() {
		return {
		}
	},
	methods: {
		autoTest() {
			axios.get('/autotest')
			.then(function (resp) {
				if (resp.data.success) {
					let data = resp.data.data;
					let xData = [];
					let yData = [];
					data.forEach((item, index) => {
						console.log(item.combination);
						xData.push(item.combination);
						yData.push(item.consuming);
					})
					
					console.log(xData);
					console.log(yData);
					
					// 基于准备好的dom，初始化echarts实例
					let chart = echarts.init(document.getElementById('chart'));
					// 绘制图表
					chart.setOption({
						tooltip: {
							trigger: 'axis'
						},
						xAxis: {
						    type: 'category',
							name: '组合',
						    data: xData
						  },
						yAxis: {
							name: '总耗时(ms)',
							
						    type: 'value'
						  },
						series: [
						    {
						      data: yData,
						      type: 'bar'
						    }
						  ]
					});	
				}
			})
			.catch(function (error) {
			  console.log(error);
			});
		}
	}
}

</script>

<style>
#chart {
	margin: auto;
	width: 1000px;
	height: 500px;
}

.btn-test {
	margin-top: 20px;
}
</style>